<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { useGetEnterpriseFactoryDetail } from '@fl/api/supplier'
import { treeFindLabel } from '@fl/utils/tree'
import { cloneDeep } from 'lodash-es'

import { relationTypeOptions } from './constant'

const id = defineModel<string>('id', { required: true })
const visible = defineModel<boolean>('visible', { required: true })

const initialState = {} as any
const state = ref(cloneDeep(initialState))

const { data: enterpriseFactoryDetailData, isLoading: isGetEnterpriseFactoryDetailLoading } = useGetEnterpriseFactoryDetail(id)

// #region Form
const isFormLoading = computed(() => isGetEnterpriseFactoryDetailLoading.value)

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 12,
        },
        label: '工厂名称',
        prop: 'name',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '社会信用代码',
        prop: 'socialCreditCode',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '工厂地址',
        prop: 'factoryAddress',
        renderField: (_value: any) => `${state.value.province}${state.value.city}${state.value.address}`,
    },
    {
        colProps: {
            span: 12,
        },
        label: '工厂年产值',
        prop: 'annualOutputValue',
        renderField: (value: any) => `${value}万元`,
    },
    {
        colProps: {
            span: 12,
        },
        label: '工厂人数',
        prop: 'employees',
        renderField: (value: any) => `${value}人`,
    },
    {
        colProps: {
            span: 12,
        },
        label: '与公司关系',
        prop: 'relationType',
        renderField: (value: any) => treeFindLabel({ targetValue: value, treeData: relationTypeOptions }),
    },
    {
        colProps: {
            span: 12,
        },
        label: '联系人',
        prop: 'contactName',
        valueType: 'text',
    },
    {
        colProps: {
            span: 12,
        },
        label: '联系人电话',
        prop: 'contactMobile',
        valueType: 'text',
    },
]
// #endregion

// #region UI Listener
function closed() {
    id.value = ''
}
// #endregion

watchEffect(() => {
    if (enterpriseFactoryDetailData.value) {
        state.value = cloneDeep(enterpriseFactoryDetailData.value)
    }
})
</script>

<template>
    <PlusDialog v-model="visible"
                :title="state.name"
                width="800"
                :has-footer="false"
                close-on-press-escape
                @closed="closed"
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <PlusForm v-else
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :has-footer="false"
                  :row-props="{ gutter: 40 }"
        />
    </PlusDialog>
</template>

<style lang="scss" scoped>
:deep(.el-form-item--default) {
    margin-bottom: 0;
}
</style>
